倘若不斷向深處扎根，就能茁壯成長 - RM

前言

在說明完 Box model 後，不意外地要開始講解到 Visual Formatting Model 了，但什麼是 Visual Formatting Model 呢？規範中寫到，它其實就是 UA 該以什麼規則去解析 document 並將其呈現到視覺化媒體...，很好，我心裡默默想又到了要打開 youtube 首頁推薦的時候了，我現在還清晰的記得自己在當初看到規範的時候是真的完全目煞煞，每天都懷疑（？人生的樣子 話說現在也是目煞煞哦，太多的專有名詞、概念會來轟炸你的腦（？，所以我想說再進入到正篇前可以稍微的介紹一下我自己之前在閱讀時的問題像是：

1. 規範中的章節如何
2. 目前的版本狀態如何
3. 當看見沒看見過的名詞時，規範本身中的專有名詞要去哪裡查

下面會對這些問題一一聊聊，希望假如有和當初我有一樣問題的話可以覺得有幫助，那我們開始吧～

話說我當初差不多每次都是頂這這種（？？？ 臉看規範的 雖然現在也一樣是這種臉。

首先，我們要看哪篇規範？

答：以下兩篇。

規範直通車：

1. Visual formatting model
2. CSS Display Module Level 3

在這裡會以 CSS2.2 中的 9、10 章節為主要的閱讀，它講述了完整的 Visual Formatting Model 範疇，閱讀上可以用這個版本當作一個範疇，除此之外在之前的文章中有說到其實許多 CSS 規範現部分內容已有 Level 3 ，在 Visual formatting model 這裡其中一項重要的新增是 CSS Display Module Level 3 ，它實際上是作為 CSS2.2 Display 內容的 擴增取代，新定義許多的概念包含 Outer Display、Inner Display、independent formatting context ...等等內容，將 Level 2 的內容做了更完整的介紹，除此之外也針對一些部分作出了修訂，非常值得去走走看看，不過目前來說我整理的內容會以熟悉的 CSS2.2 為主，CSS Display Module Level 3 為輔來補充。

Visual Formatting Model 好多章節該從哪裡看起比較好呢？

照例先來列一下 CSS2.2 第九章目錄：
9.1 Introduction to the visual formatting model
9.2 Controlling box generation
9.3 Positioning schemes
9.4 Normal flow
9.5 Floats
9.6 Absolute positioning
9.7 Relationships between ‘display’, ‘position’, and ‘float’
9.8 Comparison of normal flow, floats, and absolute positioning
9.9 Layered presentation
9.10 Text direction: the’direction’and’unicode-bidi’properties

接下來列一下 CSS2.2 第十章目錄：
10.1 Definition of "containing block"
10.2 Content width: the 'width' property
10.3 Calculating widths and margins
10.4 Minimum and maximum widths: 'min-width' and 'max-width'
10.5 Content height: the 'height' property
10.6 Calculating heights and margins
10.7 Minimum and maximum heights: 'min-height' and 'max-height'
10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

我的建議是，從頭開始讀 你一定在想這個人有說跟沒說一樣，因為其實規範本身是有設計過順序的，在 CSS Working Group 當初修訂規範時就已經規劃好了一定了邏輯編排，加上有些名詞會在前面的小章節介紹，後面搭配著其他概念講述，舉例來說要了解 Normal Flow（9.4） 前需要先了解不同類型的 box（9.2），所以按照規範的步驟來會更有邏輯性囉。（好我知道這就像翻書大家都會從前開始翻一樣，大家可以當我沒說～

Visual Formatting Model 介紹了什麼呢？

規範中給出的解釋為它是 UA 該以什麼規則去解析 document 並將其呈現到視覺化媒體，包含 box 的生成以及佈局。 等等，這熟悉的感覺不是跟開頭說的一樣？？？？？

好啦，不開玩笑，其實我覺得要簡單說明 Visual Formatting Model 很困難，因為它本身就是複雜且精細的，很粗淺的來說，它說明所有元素的 box 該如何生成的規則，以及這些 box 之間又以什麼樣的規則去進行佈局，UA 會依照這些規則對 document 去進行佈局，而規範便會針對這些細節一一的介紹、說明。

遇到太多不會的專有名詞該怎麼辦呢？

我就會默默被神秘力量吸引，打開 youtube 去看首頁推薦（到底要說這個梗幾遍～～XD

在遇到不會的名詞時可以先去查閱 CSS Display Module Level 3 下有一個章節 Appendix A: Glossary ，裡面解釋了許多名詞的定義，可以透過這個方式去理解，除此之外 MDN 中 视觉格式化模型 - Web 开发者指南 | MDN 也有介紹這個部分並且有簡體中文版，非常佛心的可以搭配食用，然後呢然後呢～～～就和我第三篇文裡提到 J. David Eisenberg 在 How to Read W3C Specs – A List Apart 寫的，不要對規範的每個詞太過鑽牛角尖，重要的是理解核心的概念以及為什麼要這麼設計的理由，因為規範會一直更新、修訂，我們需要把重點著重在核心的概念，這樣即使規範新修，也可以了解規範為什麼修訂，哪個部分是這次修訂時的重點等等、完善了當初的哪個需求、或是修正了哪個缺點。

那麼，就大概介紹到這，明天會正式回到規範中介紹，我們明天見啦～

資料來源：

CSS Display Module Level 3
Visual formatting model
How to Read W3C Specs – A List Apart

以上的部分有任何錯誤的地方，歡迎指正呦～非常感謝～～XD